<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="keywords" content="职卫帮手,职卫助手,武汉达正科有限公司,职业卫生管理系统,职卫管理系统,职业卫生检测系统,职业卫生评价系统,职业卫生采样管理,职业卫生报告生成系统,职卫检测软件,职卫评价工具">
    <meta name="description" content="职卫帮手（职卫助手）是武汉达正科有限公司开发的职业卫生管理系统，涵盖职卫管理系统、检测系统、评价系统等功能，提供职业卫生采样管理与报告生成，是专业的职卫检测软件和评价工具。">
    <link rel="icon" sizes="32x32" href="headlogo.png">
    <!-- 内联CSS样式 -->
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #165DFF;
            --primary-light: rgba(22, 93, 255, 0.1);
            --primary-dark: #0e4acc;
            --secondary: #36BFFA;
            --accent: #722ED1;
            --dark: #1D2129;
            --light: #F2F3F5;
            --gray-medium: #86909C;
            --gray-light: #F7F8FA;
            --white: #FFFFFF;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
            --radius: 8px;
            --radius-lg: 16px;
            --transition: all 0.3s ease;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: var(--dark);
            background-color: var(--white);
            line-height: 1.6;
            overflow-x: hidden;
            width: 100%;
        }

        /* 容器 */
        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 16px;
        }

        @media (min-width: 768px) {
            .container {
                padding: 0 32px;
            }
        }

        /* 按钮和链接样式 */
        a, button {
            color: inherit;
            text-decoration: none;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 24px;
            border-radius: 100px;
            font-weight: 500;
            border: none;
            transition: var(--transition);
            min-height: 44px;
        }

        .btn-primary {
            background-color: var(--primary);
            color: var(--white);
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
            box-shadow: var(--shadow);
        }

        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }

        .btn-outline:hover {
            background-color: var(--primary);
            color: var(--white);
        }

        .btn-white {
            background-color: var(--white);
            color: var(--primary);
        }

        .btn-white:hover {
            background-color: var(--light);
        }

        /* 导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 12px 0;
            transition: var(--transition);
            background-color: transparent;
        }

        .navbar-scrolled {
            background-color: var(--white);
            box-shadow: var(--shadow);
        }

        .navbar-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
        }

        .logo-icon {
            margin-right: 8px;
        }

        .nav-desktop {
            display: none;
        }

        .nav-desktop a {
            color: var(--dark);
            padding: 8px 16px;
        }

        .nav-desktop a:hover {
            color: var(--primary);
        }

        .nav-contact {
            display: none;
        }

        .menu-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            font-size: 20px;
            color: var(--dark);
            background: none;
            border: none;
            border-radius: var(--radius);
        }

        .mobile-menu {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: var(--white);
            box-shadow: var(--shadow);
            padding: 16px;
            display: none;
        }

        .mobile-menu.active {
            display: block;
        }

        .mobile-nav {
            display: flex;
            flex-direction: column;
        }

        .mobile-nav a {
            padding: 12px 0;
            color: var(--dark);
            border-bottom: 1px solid var(--light);
        }

        .mobile-nav a:hover {
            color: var(--primary);
        }

        @media (min-width: 768px) {
            .nav-desktop, .nav-contact {
                display: flex;
                align-items: center;
            }

            .menu-btn {
                display: none;
            }

            .mobile-menu {
                display: none !important;
            }
        }

        /* 英雄区域 */
        .hero {
            padding: 120px 0 80px;
            background: linear-gradient(135deg, #e6f0ff 0%, #f0f5ff 100%);
            position: relative;
            overflow: hidden;
        }

        .hero-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .hero-content {
            width: 100%;
            margin-bottom: 40px;
        }

        .hero-badge {
            display: inline-block;
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 6px 16px;
            border-radius: 100px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 24px;
        }

        .hero-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 16px;
        }

        .hero-title span {
            color: var(--primary);
        }

        .hero-description {
            font-size: 18px;
            color: var(--gray-medium);
            margin-bottom: 32px;
            max-width: 600px;
        }

        .hero-actions {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .hero-image {
            width: 100%;
            position: relative;
        }

        .hero-img {
            width: 100%;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
        }

        .hero-stats {
            position: absolute;
            background-color: var(--white);
            padding: 16px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
        }

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }

        .stat-green {
            background-color: rgba(34, 197, 94, 0.1);
            color: #22c55e;
        }

        .stat-blue {
            background-color: var(--primary-light);
            color: var(--primary);
        }

        .stat-bottom {
            bottom: -16px;
            left: 16px;
        }

        .stat-top {
            top: -16px;
            right: 16px;
        }

        .hero-brands {
            margin-top: 80px;
            text-align: center;
        }

        .brands-title {
            color: var(--gray-medium);
            margin-bottom: 24px;
        }

        .brands-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 32px;
            opacity: 0.7;
        }

        .brand {
            color: var(--gray-medium);
            font-size: 20px;
            font-weight: 700;
        }

        @media (min-width: 1024px) {
            .hero-container {
                flex-direction: row;
            }

            .hero-content {
                width: 50%;
                margin-bottom: 0;
            }

            .hero-image {
                width: 50%;
            }

            .hero-actions {
                flex-direction: row;
            }
        }

        /* 通用部分样式 */
        .section {
            padding: 80px 0;
        }

        .section-white {
            background-color: var(--white);
        }

        .section-light {
            background-color: var(--light);
        }

        .section-dark {
            background-color: var(--dark);
            color: var(--white);
        }

        .section-gradient {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: var(--white);
        }

        .section-header {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 64px;
        }

        .section-badge {
            display: inline-block;
            background-color: var(--primary-light);
            color: var(--primary);
            padding: 6px 16px;
            border-radius: 100px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 16px;
        }

        .section-title {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 16px;
        }

        .section-description {
            font-size: 18px;
            color: var(--gray-medium);
        }

        .section-dark .section-description {
            color: rgba(255, 255, 255, 0.8);
        }

        /* 网格布局 */
        .grid {
            display: grid;
            gap: 24px;
        }

        .grid-1 {
            grid-template-columns: 1fr;
        }

        .grid-2 {
            grid-template-columns: 1fr;
        }

        .grid-3 {
            grid-template-columns: 1fr;
        }

        @media (min-width: 768px) {
            .grid-2 {
                grid-template-columns: repeat(2, 1fr);
            }

            .grid-3 {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* 卡片样式 */
        .card {
            background-color: var(--white);
            border-radius: var(--radius-lg);
            padding: 24px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .card-icon {
            width: 64px;
            height: 64px;
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 16px;
        }

        .card-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .card-description {
            color: var(--gray-medium);
            margin-bottom: 16px;
        }

        .card-list {
            list-style: none;
            margin-bottom: 24px;
        }

        .card-list li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 8px;
        }

        .card-list li:before {
            content: "✓";
            color: #22c55e;
            margin-right: 8px;
            font-weight: bold;
        }

        .card-link {
            color: var(--primary);
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        .card-link:after {
            content: "→";
            margin-left: 8px;
            transition: var(--transition);
        }

        .card-link:hover:after {
            transform: translateX(4px);
        }

        /* 标签页 */
        .tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-bottom: 48px;
        }

        .tab {
            padding: 12px 20px;
            border-radius: 100px;
            background-color: var(--white);
            color: var(--dark);
            font-weight: 500;
            border: none;
            transition: var(--transition);
            min-height: 44px;
        }

        .tab.active {
            background-color: var(--primary);
            color: var(--white);
        }

        .tab-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 48px;
        }

        .tab-image {
            width: 100%;
        }

        .tab-img {
            width: 100%;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
        }

        .tab-text {
            width: 100%;
        }

        .tab-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 16px;
        }

        .tab-description {
            color: var(--gray-medium);
            margin-bottom: 32px;
        }

        .feature-list {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .feature-item {
            display: flex;
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius);
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            flex-shrink: 0;
        }

        .feature-content h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .feature-content p {
            color: var(--gray-medium);
        }

        @media (min-width: 1024px) {
            .tab-content {
                flex-direction: row;
            }

            .tab-image, .tab-text {
                width: 50%;
            }
        }

        /* 数据展示 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-bottom: 32px;
        }

        .stat-card {
            background-color: var(--light);
            padding: 24px;
            border-radius: var(--radius-lg);
            text-align: center;
        }

        .stat-number {
            font-size: 32px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 8px;
        }

        .stat-label {
            color: var(--gray-medium);
            font-size: 14px;
        }

        .chart-container {
            background-color: var(--white);
            border-radius: var(--radius-lg);
            padding: 24px;
            box-shadow: var(--shadow-lg);
        }

        .chart-header {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom: 16px;
            gap: 16px;
        }

        .chart-title {
            font-size: 18px;
            font-weight: 700;
        }

        .chart-controls {
            display: flex;
            gap: 8px;
        }

        .chart-control {
            padding: 8px 12px;
            border-radius: 100px;
            background-color: var(--light);
            color: var(--gray-medium);
            font-size: 14px;
            border: none;
            transition: var(--transition);
            min-height: 36px;
        }

        .chart-control.active {
            background-color: var(--primary-light);
            color: var(--primary);
        }

        .chart {
            height: 300px;
            position: relative;
        }

        @media (min-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(4, 1fr);
            }

            .chart-header {
                flex-direction: row;
                align-items: center;
            }
        }

        /* 客户案例 */
        .case-card {
            background-color: var(--white);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .case-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .case-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .case-content {
            padding: 24px;
        }

        .case-header {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }

        .case-logo {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 12px;
        }

        .case-company {
            font-weight: 700;
        }

        .case-info {
            font-size: 14px;
            color: var(--gray-medium);
        }

        .case-description {
            color: var(--gray-medium);
            margin-bottom: 16px;
        }

        /* 定价方案 */
        .pricing-toggle-container {
            display: inline-flex;
            background-color: var(--light);
            padding: 4px;
            border-radius: 100px;
            margin-bottom: 48px;
        }

        .pricing-toggle {
            padding: 8px 20px;
            border-radius: 100px;
            background-color: transparent;
            color: var(--gray-medium);
            font-weight: 500;
            border: none;
            transition: var(--transition);
            min-height: 44px;
        }

        .pricing-toggle.active {
            background-color: var(--white);
            color: var(--dark);
            box-shadow: var(--shadow);
        }

        .pricing-card {
            border: 1px solid var(--light);
            border-radius: var(--radius-lg);
            padding: 32px;
            transition: var(--transition);
            position: relative;
        }

        .pricing-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
        }

        .pricing-card.featured {
            border-color: var(--primary);
            box-shadow: var(--shadow-lg);
            transform: scale(1.05);
        }

        .pricing-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--primary);
            color: var(--white);
            padding: 6px 16px;
            border-radius: 100px;
            font-size: 14px;
            font-weight: 500;
        }

        .pricing-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .pricing-description {
            color: var(--gray-medium);
            margin-bottom: 24px;
        }

        .pricing-price {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 24px;
        }

        .pricing-period {
            color: var(--gray-medium);
            font-size: 16px;
            font-weight: normal;
        }

        .pricing-features {
            list-style: none;
            margin-bottom: 32px;
        }

        .pricing-features li {
            display: flex;
            align-items: flex-start;
            margin-bottom: 12px;
        }

        .pricing-features li:before {
            content: "✓";
            color: #22c55e;
            margin-right: 12px;
            font-weight: bold;
        }

        .pricing-features li.disabled {
            color: var(--gray-medium);
        }

        .pricing-features li.disabled:before {
            content: "✕";
            color: var(--gray-medium);
        }

        @media (min-width: 768px) {
            .pricing-grid {
                gap: 32px;
            }
        }

        /* 表单样式 */
        .form-container {
            background-color: var(--white);
            border-radius: var(--radius-lg);
            padding: 32px;
            box-shadow: var(--shadow-lg);
            color: var(--dark);
        }

        .form-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 24px;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-label {
            display: block;
            color: var(--gray-medium);
            margin-bottom: 8px;
            font-size: 14px;
        }

        .form-input, .form-select {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--light);
            border-radius: var(--radius);
            font-size: 16px;
            transition: var(--transition);
        }

        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
        }

        .form-submit {
            width: 100%;
            margin-top: 8px;
        }

        .form-note {
            font-size: 12px;
            color: var(--gray-medium);
            text-align: center;
            margin-top: 16px;
        }

        .form-note a {
            color: var(--primary);
            text-decoration: underline;
        }

        /* 页脚 */
        .footer {
            background-color: var(--dark);
            color: var(--white);
            padding: 64px 0 32px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
            margin-bottom: 48px;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 16px;
        }

        .footer-description {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 24px;
            max-width: 400px;
        }

        .footer-social {
            display: flex;
            gap: 12px;
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }

        .social-link:hover {
            background-color: var(--primary);
        }

        .footer-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 16px;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: var(--white);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .footer-copyright {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
        }

        .footer-legal {
            display: flex;
            gap: 24px;
        }

        .footer-legal a {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            transition: var(--transition);
        }

        .footer-legal a:hover {
            color: var(--white);
        }

        @media (min-width: 768px) {
            .footer-grid {
                grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
            }

            .footer-bottom {
                flex-direction: row;
                justify-content: space-between;
            }
        }

        /* 返回顶部按钮 */
        .back-to-top {
            position: fixed;
            bottom: 24px;
            right: 24px;
            width: 48px;
            height: 48px;
            background-color: var(--primary);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            opacity: 0;
            visibility: hidden;
            z-index: 1000;
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        /* 动画定义 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease forwards;
        }

        .animate-pulse-slow {
            animation: pulse 3s infinite ease-in-out;
        }

        .animate-float {
            animation: float 6s infinite ease-in-out;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }

        /* 移动端优化 */
        @media (max-width: 767px) {
            /* 触摸目标最小尺寸 */
            a, button {
                min-height: 44px;
                min-width: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            /* 移动端按钮触摸反馈 */
            button:active, a:active {
                transform: scale(0.98);
                opacity: 0.8;
            }

            /* 移动端表单优化 */
            input, select, textarea {
                font-size: 16px !important;
                -webkit-appearance: none;
                appearance: none;
                border-radius: var(--radius);
            }

            /* 移动端图片优化 */
            img {
                max-width: 100%;
                height: auto;
                display: block;
            }

            /* 移动端卡片阴影优化 */
            .card, .case-card, .pricing-card {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            }
        }

        /* 触摸反馈效果 */
        .touch-feedback {
            -webkit-tap-highlight-color: rgba(22, 93, 255, 0.1);
            transition: all 0.2s ease;
        }

        .touch-feedback:active {
            transform: scale(0.97);
            opacity: 0.9;
        }

        /* 移动端导航菜单优化 */
        @media (max-width: 767px) {
            .mobile-menu {
                max-height: calc(100vh - 80px);
                overflow-y: auto;
            }
        }
    </style>
</head>

<body>
<!-- 导航栏 -->
<header id="navbar" class="navbar">
    <div class="container navbar-container">
        <!-- Logo -->
        <div class="logo">
            <img src="logo.png" alt="职卫帮手Logo" class="logo-icon" style="width: 62px; height: 40px; margin-right: 8px;">
            <img src="zw.png" alt="职卫帮手Logo" class="logo-icon" style="width: 160px; height: 40px; margin-right: 8px;">
<!--            <span>职卫帮手</span>-->
        </div>

        <!-- 桌面导航 -->
        <nav class="nav-desktop">
            <a href="#solutions">解决方案</a>
            <a href="#features">产品功能</a>
            <a href="#customers">客户案例</a>
            <a href="#pricing">定价</a>
            <a href="#resources">资源中心</a>
        </nav>

        <!-- 联系按钮 -->
        <div class="nav-contact">
            <a href="tel:1818-6644-108" style="margin-right: 16px;">📞 1818-6644-108</a>
            <a href="#contact" class="btn btn-primary">预约演示</a>
        </div>

        <!-- 移动端菜单按钮 -->
        <button id="menuBtn" class="menu-btn touch-feedback">
            <span id="menuIcon">☰</span>
        </button>
    </div>

    <!-- 移动端导航菜单 -->
    <div id="mobileMenu" class="mobile-menu">
        <nav class="mobile-nav">
            <a href="#solutions">解决方案</a>
            <a href="#features">产品功能</a>
            <a href="#customers">客户案例</a>
            <a href="#pricing">定价</a>
            <a href="#resources">资源中心</a>
            <div style="padding: 16px 0;">
                <a href="#contact" class="btn btn-primary" style="width: 100%;">预约演示</a>
            </div>
        </nav>
    </div>
</header>

<main>
    <!-- 英雄区域 -->
    <section class="hero">
        <div class="container hero-container">
            <div class="hero-content reveal">
                <span class="hero-badge">符合GBZ331-2024标准</span>
                <h1 class="hero-title">
                    快速生成报告<br>
                    <span>领跑职业卫生</span>
                </h1>
                <p class="hero-description">
                    职卫帮手基于GBZ331-2024，提供基于国家标准，基于行业标准，帮助机构实现高效、低门槛、精准的职业卫生管理。
                </p>
                <div class="hero-actions">
                    <a href="#demo" class="btn btn-primary touch-feedback">免费试用14天</a>
                    <a href="#video" class="btn btn-outline touch-feedback">
                        <span style="margin-right: 8px;">▶</span> 观看演示
                    </a>
                </div>
            </div>

            <div class="hero-image reveal" style="animation-delay: 0.3s">
                <div class="animate-float">
                    <img src="https://picsum.photos/seed/lingxing1/600/400" alt="职卫帮手系统界面" class="hero-img">
                    <div class="hero-stats stat-bottom">
                        <div class="stat-icon stat-green">📈</div>
                        <div>
                            <p style="font-size: 12px; color: var(--gray-medium);">销售额增长</p>
                            <p style="font-weight: 700; font-size: 16px;">+37.5%</p>
                        </div>
                    </div>
                    <div class="hero-stats stat-top">
                        <div class="stat-icon stat-blue">👥</div>
                        <div>
                            <p style="font-size: 12px; color: var(--gray-medium);">活跃用户</p>
                            <p style="font-weight: 700; font-size: 16px;">10,000+</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 品牌客户 -->
        <div class="container hero-brands reveal">
            <p class="brands-title">值得信赖的合作伙伴</p>
            <div class="brands-grid">
                <div class="brand">品牌A</div>
                <div class="brand">品牌B</div>
                <div class="brand">品牌C</div>
                <div class="brand">品牌D</div>
                <div class="brand">品牌E</div>
            </div>
        </div>
    </section>

    <!-- 解决方案 -->
    <section id="solutions" class="section section-white">
        <div class="container">
            <div class="section-header reveal">
                <span class="section-badge">解决方案</span>
                <h2 class="section-title">为不同阶段卖家提供定制化方案</h2>
                <p class="section-description">
                    无论您是刚起步的中小卖家，还是规模化运营的成熟企业，领星都能满足您的业务需求
                </p>
            </div>

            <div class="grid grid-3">
                <!-- 方案1 -->
                <div class="card reveal">
                    <div class="card-icon" style="background-color: var(--primary-light); color: var(--primary);">🚀</div>
                    <h3 class="card-title">初创卖家方案</h3>
                    <p class="card-description">
                        帮助新手卖家快速上手亚马逊运营，简化流程，降低入门门槛，专注产品与市场拓展。
                    </p>
                    <ul class="card-list">
                        <li>基础订单与库存管理</li>
                        <li>关键词追踪与分析</li>
                        <li>简易财务报表</li>
                    </ul>
                    <a href="#" class="card-link">了解详情</a>
                </div>

                <!-- 方案2 -->
                <div class="card reveal" style="animation-delay: 0.2s">
                    <div class="card-icon" style="background-color: rgba(114, 46, 209, 0.1); color: var(--accent);">📊</div>
                    <h3 class="card-title">成长型卖家方案</h3>
                    <p class="card-description">
                        针对快速发展的卖家，提供全面的运营分析与管理工具，助力业务规模化扩张。
                    </p>
                    <ul class="card-list">
                        <li>多店铺统一管理</li>
                        <li>精细化广告管理</li>
                        <li>智能补货建议</li>
                        <li>团队协作权限管理</li>
                    </ul>
                    <a href="#" class="card-link">了解详情</a>
                </div>

                <!-- 方案3 -->
                <div class="card reveal" style="animation-delay: 0.4s">
                    <div class="card-icon" style="background-color: rgba(54, 191, 250, 0.1); color: var(--secondary);">🏢</div>
                    <h3 class="card-title">品牌出海方案</h3>
                    <p class="card-description">
                        为成熟品牌提供全球化战略支持，整合全渠道数据，实现精细化运营与品牌增值。
                    </p>
                    <ul class="card-list">
                        <li>多平台多站点整合</li>
                        <li>供应链深度协同</li>
                        <li>高级BI数据分析</li>
                        <li>定制化API对接</li>
                    </ul>
                    <a href="#" class="card-link">了解详情</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 产品功能 -->
    <section id="features" class="section section-light">
        <div class="container">
            <div class="section-header reveal">
                <span class="section-badge">核心功能</span>
                <h2 class="section-title">全方位提升运营效率</h2>
                <p class="section-description">
                    职卫帮手整合职业卫生管理全流程，通过智能化工具帮助机构降本增效
                </p>
            </div>

            <!-- 功能标签页 -->
            <div class="tabs reveal">
                <button class="tab active touch-feedback">数据洞察</button>
                <button class="tab touch-feedback">广告管理</button>
                <button class="tab touch-feedback">库存管理</button>
                <button class="tab touch-feedback">订单处理</button>
                <button class="tab touch-feedback">财务核算</button>
            </div>

            <!-- 功能内容 -->
            <div class="tab-content">
                <div class="tab-image reveal">
                    <img src="https://picsum.photos/seed/feature1/600/400" alt="数据洞察功能" class="tab-img">
                </div>
                <div class="tab-text reveal" style="animation-delay: 0.3s">
                    <h3 class="tab-title">智能数据洞察，驱动科学决策</h3>
                    <p class="tab-description">
                        整合职业卫生全维度数据，通过AI算法分析趋势、动态和表现，为您提供精准的业务洞察和决策建议。
                    </p>

                    <div class="feature-list">
                        <div class="feature-item">
                            <div class="feature-icon">📊</div>
                            <div class="feature-content">
                                <h4>多维度业绩分析</h4>
                                <p>实时监控数据、分析、周转率等关键指标</p>
                            </div>
                        </div>

                        <div class="feature-item">
                            <div class="feature-icon">👁️</div>
                            <div class="feature-content">
                                <h4>动态追踪</h4>
                                <p>实时监控变化，把握行业态势</p>
                            </div>
                        </div>

                        <div class="feature-item">
                            <div class="feature-icon">💡</div>
                            <div class="feature-content">
                                <h4>智能运营建议</h4>
                                <p>基于数据分析自动生成优化建议，提升运营效率</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 数据展示 -->
    <section class="section section-white">
        <div class="container">
            <div class="tab-content">
                <div class="tab-text reveal">
                    <span class="section-badge">客户价值</span>
                    <h2 class="section-title">选择职卫帮手，机构平均提升</h2>

                    <div class="stats-grid">
                        <div class="stat-card">
                            <p class="stat-number">42%</p>
                            <p class="stat-label">运营效率提升</p>
                        </div>
                        <div class="stat-card">
                            <p class="stat-number">35%</p>
                            <p class="stat-label">管理效率提升</p>
                        </div>
                        <div class="stat-card">
                            <p class="stat-number">68%</p>
                            <p class="stat-label">报告质量优化</p>
                        </div>
                        <div class="stat-card">
                            <p class="stat-number">27%</p>
                            <p class="stat-label">整体效率增长</p>
                        </div>
                    </div>

                    <p class="section-description" style="text-align: left; margin-bottom: 24px;">
                        职卫帮手已服务超过10,000家机构，帮助他们实现数据驱动的精细化管理，在职业卫生领域保持领先优势。
                    </p>

                    <a href="#case" class="btn btn-primary touch-feedback">查看成功案例</a>
                </div>

                <div class="tab-image reveal" style="animation-delay: 0.3s">
                    <div class="chart-container">
                        <div class="chart-header">
                            <h3 class="chart-title">机构业绩增长趋势</h3>
                            <div class="chart-controls">
                                <button class="chart-control active touch-feedback">月度</button>
                                <button class="chart-control touch-feedback">季度</button>
                                <button class="chart-control touch-feedback">年度</button>
                            </div>
                        </div>
                        <div class="chart" id="growthChart">
                            <!-- 图表将通过JavaScript生成 -->
                            <canvas id="chartCanvas" width="400" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 客户案例 -->
    <section id="customers" class="section section-light">
        <div class="container">
            <div class="section-header reveal">
                <span class="section-badge">客户案例</span>
                <h2 class="section-title">他们都在使用职卫帮手实现增长</h2>
                <p class="section-description">
                    来自不同行业、不同规模的机构通过职卫帮手提升管理效率，实现业务增长
                </p>
            </div>

            <div class="grid grid-3">
                <!-- 案例1 -->
                <div class="case-card reveal">
                    <img src="https://picsum.photos/seed/case1/600/300" alt="客户案例" class="case-image">
                    <div class="case-content">
                        <div class="case-header">
                            <img src="https://picsum.photos/seed/logo1/60/60" alt="公司Logo" class="case-logo">
                            <div>
                                <h3 class="case-company">环球卫生</h3>
                                <p class="case-info">职业卫生 | 服务100+企业</p>
                            </div>
                        </div>
                        <p class="case-description">
                            通过职卫帮手实现多项目数据整合，管理效率提升50%，报告质量提高30%。
                        </p>
                        <a href="#" class="card-link">查看完整案例</a>
                    </div>
                </div>

                <!-- 案例2 -->
                <div class="case-card reveal" style="animation-delay: 0.2s">
                    <img src="https://picsum.photos/seed/case2/600/300" alt="客户案例" class="case-image">
                    <div class="case-content">
                        <div class="case-header">
                            <img src="https://picsum.photos/seed/logo2/60/60" alt="公司Logo" class="case-logo">
                            <div>
                                <h3 class="case-company">安卫检测</h3>
                                <p class="case-info">职业卫生检测 | 服务50+企业</p>
                            </div>
                        </div>
                        <p class="case-description">
                            借助职卫帮手的数据分析能力，检测效率提升40%，报告周期缩短25%。
                        </p>
                        <a href="#" class="card-link">查看完整案例</a>
                    </div>
                </div>

                <!-- 案例3 -->
                <div class="case-card reveal" style="animation-delay: 0.4s">
                    <img src="https://picsum.photos/seed/case3/600/300" alt="客户案例" class="case-image">
                    <div class="case-content">
                        <div class="case-header">
                            <img src="https://picsum.photos/seed/logo3/60/60" alt="公司Logo" class="case-logo">
                            <div>
                                <h3 class="case-company">赛维检测</h3>
                                <p class="case-info">职业卫生 | 服务30+企业</p>
                            </div>
                        </div>
                        <p class="case-description">
                            利用职卫帮手实现项目协同，报告处理效率提升60%，客户满意度提高20%。
                        </p>
                        <a href="#" class="card-link">查看完整案例</a>
                    </div>
                </div>
            </div>

            <div class="section-header" style="margin-top: 48px;">
                <a href="#" class="btn btn-outline touch-feedback">查看更多案例</a>
            </div>
        </div>
    </section>

    <!-- 定价方案 -->
    <section id="pricing" class="section section-white">
        <div class="container">
            <div class="section-header reveal">
                <span class="section-badge">定价方案</span>
                <h2 class="section-title">选择适合您业务的方案</h2>
                <p class="section-description">
                    灵活的定价策略，满足不同规模机构的需求，按需选择，性价比更高
                </p>

                <div class="pricing-toggle-container">
                    <button class="pricing-toggle active touch-feedback">按月付费</button>
                    <button class="pricing-toggle touch-feedback">按年付费 <span style="color: #22c55e; font-size: 12px; margin-left: 4px;">省20%</span></button>
                </div>
            </div>

            <div class="grid grid-3 pricing-grid">
                <!-- 基础版 -->
                <div class="pricing-card reveal">
                    <h3 class="pricing-title">基础版</h3>
                    <p class="pricing-description">适合个人和小型机构</p>
                    <div class="pricing-price">¥1,999<span class="pricing-period">/月</span></div>
                    <a href="#contact" class="btn btn-outline" style="width: 100%; margin-bottom: 24px;">选择此方案</a>

                    <ul class="pricing-features">
                        <li>1个机构账号</li>
                        <li>基础报告管理</li>
                        <li>数据预警提醒</li>
                        <li>基础统计报表</li>
                        <li class="disabled">高级分析工具</li>
                        <li class="disabled">API接口访问</li>
                    </ul>
                </div>

                <!-- 专业版 -->
                <div class="pricing-card featured reveal" style="animation-delay: 0.3s">
                    <div class="pricing-badge">最受欢迎</div>
                    <h3 class="pricing-title">专业版</h3>
                    <p class="pricing-description">适合成长型机构</p>
                    <div class="pricing-price">¥4,999<span class="pricing-period">/月</span></div>
                    <a href="#contact" class="btn btn-primary" style="width: 100%; margin-bottom: 24px;">选择此方案</a>

                    <ul class="pricing-features">
                        <li>5个机构账号</li>
                        <li>全功能报告管理</li>
                        <li>智能数据管理</li>
                        <li>高级统计分析</li>
                        <li>高级分析工具</li>
                        <li class="disabled">API接口访问</li>
                    </ul>
                </div>

                <!-- 企业版 -->
                <div class="pricing-card reveal" style="animation-delay: 0.6s">
                    <h3 class="pricing-title">企业版</h3>
                    <p class="pricing-description">适合规模化运营机构</p>
                    <div class="pricing-price">¥9,999<span class="pricing-period">/月</span></div>
                    <a href="#contact" class="btn btn-outline" style="width: 100%; margin-bottom: 24px;">选择此方案</a>

                    <ul class="pricing-features">
                        <li>无限机构账号</li>
                        <li>全功能报告管理</li>
                        <li>项目协同管理</li>
                        <li>BI智能数据分析</li>
                        <li>高级分析工具</li>
                        <li>API接口访问</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 预约演示 -->
    <section id="contact" class="section section-gradient">
        <div class="container">
            <div class="tab-content">
                <div class="tab-text reveal">
                    <h2 class="section-title" style="color: white;">
                        准备好提升您的职业卫生管理效率了吗？
                    </h2>
                    <p class="section-description" style="color: rgba(255, 255, 255, 0.8); margin-bottom: 32px;">
                        填写表单预约演示，我们的专业顾问将为您展示如何通过职卫帮手解决管理痛点，实现业务增长。
                    </p>

                    <div class="feature-list">
                        <div class="feature-item">
                            <div class="feature-icon" style="background-color: rgba(255, 255, 255, 0.2); color: white;">👤</div>
                            <div class="feature-content">
                                <h4 style="color: white;">1对1专属演示</h4>
                                <p style="color: rgba(255, 255, 255, 0.8);">根据您的业务需求定制演示内容</p>
                            </div>
                        </div>

                        <div class="feature-item">
                            <div class="feature-icon" style="background-color: rgba(255, 255, 255, 0.2); color: white;">💡</div>
                            <div class="feature-content">
                                <h4 style="color: white;">专业管理建议</h4>
                                <p style="color: rgba(255, 255, 255, 0.8);">获取针对性的职业卫生管理优化方案</p>
                            </div>
                        </div>

                        <div class="feature-item">
                            <div class="feature-icon" style="background-color: rgba(255, 255, 255, 0.2); color: white;">📄</div>
                            <div class="feature-content">
                                <h4 style="color: white;">行业报告</h4>
                                <p style="color: rgba(255, 255, 255, 0.8);">免费获取最新职业卫生行业分析报告</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-image reveal" style="animation-delay: 0.3s">
                    <div class="form-container">
                        <h3 class="form-title">预约免费演示</h3>
                        <form>
                            <div class="form-group">
                                <label for="name" class="form-label">姓名</label>
                                <input type="text" id="name" class="form-input" placeholder="请输入您的姓名">
                            </div>

                            <div class="form-group">
                                <label for="company" class="form-label">机构名称</label>
                                <input type="text" id="company" class="form-input" placeholder="请输入您的机构名称">
                            </div>

                            <div class="form-group">
                                <label for="phone" class="form-label">手机号码</label>
                                <input type="tel" id="phone" class="form-input" placeholder="请输入您的手机号码">
                            </div>

                            <div class="form-group">
                                <label for="orgType" class="form-label">机构类型</label>
                                <select id="orgType" class="form-select">
                                    <option value="">请选择您的机构类型</option>
                                    <option value="individual">个人从业者</option>
                                    <option value="small">中小型机构</option>
                                    <option value="medium">中大型机构</option>
                                    <option value="large">大型机构</option>
                                </select>
                            </div>

                            <button type="submit" class="btn btn-primary form-submit touch-feedback">提交预约</button>

                            <p class="form-note">
                                提交即表示您同意我们的<a href="#">服务条款</a>和<a href="#">隐私政策</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 资源中心 -->
    <section id="resources" class="section section-light">
        <div class="container">
            <div class="section-header reveal">
                <span class="section-badge">资源中心</span>
                <h2 class="section-title">职业卫生管理干货分享</h2>
                <p class="section-description">
                    最新行业资讯、管理技巧、实战案例，助力您的职业卫生业务增长
                </p>
            </div>

            <div class="grid grid-3">
                <!-- 资源1 -->
                <div class="case-card reveal">
                    <img src="https://picsum.photos/seed/article1/600/300" alt="文章封面" class="case-image">
                    <div class="case-content">
                        <div style="display: flex; align-items: center; font-size: 14px; color: var(--gray-medium); margin-bottom: 12px;">
                            <span>职业卫生管理</span>
                            <span style="margin: 0 8px;">•</span>
                            <span>2023-06-15</span>
                        </div>
                        <h3 class="card-title">2023年职业卫生管理策略：如何提升效率的5个技巧</h3>
                        <p class="case-description">
                            本文分享了职业卫生管理优化的核心策略，帮助机构在竞争激烈的市场中提高管理效率，降低运营成本，提升整体盈利能力。
                        </p>
                        <a href="#" class="card-link">阅读全文</a>
                    </div>
                </div>

                <!-- 资源2 -->
                <div class="case-card reveal" style="animation-delay: 0.2s">
                    <img src="https://picsum.photos/seed/article2/600/300" alt="文章封面" class="case-image">
                    <div class="case-content">
                        <div style="display: flex; align-items: center; font-size: 14px; color: var(--gray-medium); margin-bottom: 12px;">
                            <span>行业分析</span>
                            <span style="margin: 0 8px;">•</span>
                            <span>2023-05-28</span>
                        </div>
                        <h3 class="card-title">职业卫生行业分析：2023年机构该如何发展？</h3>
                        <p class="case-description">
                            深入分析职业卫生行业特点、竞争环境、发展空间及运营难点，为机构提供业务拓展决策参考。
                        </p>
                        <a href="#" class="card-link">阅读全文</a>
                    </div>
                </div>

                <!-- 资源3 -->
                <div class="case-card reveal" style="animation-delay: 0.4s">
                    <img src="https://picsum.photos/seed/article3/600/300" alt="文章封面" class="case-image">
                    <div class="case-content">
                        <div style="display: flex; align-items: center; font-size: 14px; color: var(--gray-medium); margin-bottom: 12px;">
                            <span>技术应用</span>
                            <span style="margin: 0 8px;">•</span>
                            <span>2023-04-12</span>
                        </div>
                        <h3 class="card-title">职业卫生技术应用：利用数据分析提升服务质量</h3>
                        <p class="case-description">
                            分享如何通过数据分析工具挖掘服务机会，识别高需求、高质量的服务方向，提高客户满意度。
                        </p>
                        <a href="#" class="card-link">阅读全文</a>
                    </div>
                </div>
            </div>

            <div class="section-header" style="margin-top: 48px;">
                <a href="#" class="btn btn-outline touch-feedback">查看更多资源</a>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="footer">
    <div class="container">
        <div class="footer-grid">
            <div>
                <div class="footer-logo">
                    <span style="margin-right: 8px;">📊</span>
                    <span>职卫帮手</span>
                </div>
                <p class="footer-description">
                    职卫帮手是专业的职业卫生管理系统，为职业卫生机构提供数据驱动的精细化运营解决方案，助力企业实现高效增长。
                </p>
                <div class="footer-social">
                    <a href="#" class="social-link">微</a>
                    <a href="#" class="social-link">微</a>
                    <a href="#" class="social-link">领</a>
                    <a href="#" class="social-link">视</a>
                </div>
            </div>

            <div>
                <h4 class="footer-title">产品</h4>
                <ul class="footer-links">
                    <li><a href="#">功能介绍</a></li>
                    <li><a href="#">定价方案</a></li>
                    <li><a href="#">版本对比</a></li>
                    <li><a href="#">更新日志</a></li>
                    <li><a href="#">API文档</a></li>
                </ul>
            </div>

            <div>
                <h4 class="footer-title">资源</h4>
                <ul class="footer-links">
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">管理干货</a></li>
                    <li><a href="#">行业报告</a></li>
                    <li><a href="#">客户案例</a></li>
                    <li><a href="#">视频教程</a></li>
                </ul>
            </div>

            <div>
                <h4 class="footer-title">公司</h4>
                <ul class="footer-links">
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">服务条款</a></li>
                    <li><a href="#">隐私政策</a></li>
                </ul>
            </div>
        </div>

        <div class="footer-bottom">
            <p class="footer-copyright">© 2023 职卫帮手. 保留所有权利.</p>
            <div class="footer-legal">
                <a href="#">服务条款</a>
                <a href="#">隐私政策</a>
                <a href="#">Cookie政策</a>
            </div>
        </div>
    </div>
</footer>

<!-- 返回顶部按钮 -->
<button id="backToTop" class="back-to-top touch-feedback">↑</button>

<!-- JavaScript -->
<script>
    // 页面加载后立即执行滚动检测
    document.addEventListener('DOMContentLoaded', function() {
        // 立即检查一次可见元素
        revealElements();

        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        const backToTop = document.getElementById('backToTop');
        let ticking = false;

        function handleScroll() {
            if (window.scrollY > 100) {
                navbar.classList.add('navbar-scrolled');
                backToTop.classList.add('visible');
            } else {
                navbar.classList.remove('navbar-scrolled');
                backToTop.classList.remove('visible');
            }

            // 滚动显示动画
            if (!ticking) {
                window.requestAnimationFrame(function() {
                    revealElements();
                    ticking = false;
                });
                ticking = true;
            }
        }

        window.addEventListener('scroll', handleScroll, { passive: true });

        // 移动端菜单
        const menuBtn = document.getElementById('menuBtn');
        const menuIcon = document.getElementById('menuIcon');
        const mobileMenu = document.getElementById('mobileMenu');
        const mobileMenuLinks = mobileMenu.querySelectorAll('a');

        menuBtn.addEventListener('click', function() {
            mobileMenu.classList.toggle('active');
            if (mobileMenu.classList.contains('active')) {
                menuIcon.textContent = '✕';
                document.body.style.overflow = 'hidden';
            } else {
                menuIcon.textContent = '☰';
                document.body.style.overflow = '';
            }
        });

        // 点击菜单链接后关闭菜单
        mobileMenuLinks.forEach(link => {
            link.addEventListener('click', function() {
                mobileMenu.classList.remove('active');
                menuIcon.textContent = '☰';
                document.body.style.overflow = '';
            });
        });

        // 点击菜单外部区域关闭菜单
        document.addEventListener('click', function(event) {
            if (!menuBtn.contains(event.target) && !mobileMenu.contains(event.target)) {
                if (mobileMenu.classList.contains('active')) {
                    mobileMenu.classList.remove('active');
                    menuIcon.textContent = '☰';
                    document.body.style.overflow = '';
                }
            }
        });

        // 功能标签切换
        const featureTabs = document.querySelectorAll('.tab');

        featureTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有标签的active类
                featureTabs.forEach(t => {
                    t.classList.remove('active');
                });

                // 给当前点击的标签添加active类
                this.classList.add('active');
            });
        });

        // 定价切换
        const pricingToggles = document.querySelectorAll('.pricing-toggle');

        pricingToggles.forEach(toggle => {
            toggle.addEventListener('click', function() {
                // 移除所有切换按钮的active类
                pricingToggles.forEach(t => {
                    t.classList.remove('active');
                });

                // 给当前点击的按钮添加active类
                this.classList.add('active');
            });
        });

        // 返回顶部
        backToTop.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 初始化图表
        const canvas = document.getElementById('chartCanvas');
        if (canvas) {
            // 设置Canvas尺寸
            canvas.width = canvas.parentElement.offsetWidth;
            canvas.height = canvas.parentElement.offsetHeight;

            // 绘制简单图表
            const data1 = [120, 190, 230, 290, 380, 450, 520, 610, 690, 780, 890, 1020];
            const data2 = [120, 150, 180, 210, 240, 270, 300, 330, 360, 390, 420, 450];
            const labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

            const maxValue = Math.max(...data1, ...data2);
            const padding = 40;
            const chartWidth = canvas.width - padding * 2;
            const chartHeight = canvas.height - padding * 2;

            // 绘制坐标轴
            const ctx = canvas.getContext('2d');
            ctx.strokeStyle = '#e5e7eb';
            ctx.lineWidth = 1;

            // Y轴
            ctx.beginPath();
            ctx.moveTo(padding, padding);
            ctx.lineTo(padding, canvas.height - padding);
            ctx.stroke();

            // X轴
            ctx.beginPath();
            ctx.moveTo(padding, canvas.height - padding);
            ctx.lineTo(canvas.width - padding, canvas.height - padding);
            ctx.stroke();

            // 绘制网格线
            ctx.strokeStyle = '#f3f4f6';
            ctx.lineWidth = 1;

            for (let i = 0; i <= 5; i++) {
                const y = padding + (chartHeight / 5) * i;
                ctx.beginPath();
                ctx.moveTo(padding, y);
                ctx.lineTo(canvas.width - padding, y);
                ctx.stroke();

                // Y轴标签
                ctx.fillStyle = '#6b7280';
                ctx.font = '12px Arial';
                ctx.textAlign = 'right';
                ctx.fillText(Math.round(maxValue / 5 * (5 - i)), padding - 10, y + 4);
            }

            // 绘制数据线
            function drawLine(data, color, fill = false) {
                ctx.beginPath();

                for (let i = 0; i < data.length; i++) {
                    const x = padding + (chartWidth / (data.length - 1)) * i;
                    const y = canvas.height - padding - (data[i] / maxValue) * chartHeight;

                    if (i === 0) {
                        ctx.moveTo(x, y);
                    } else {
                        ctx.lineTo(x, y);
                    }
                }

                ctx.strokeStyle = color;
                ctx.lineWidth = 3;
                ctx.stroke();

                // 填充区域
                if (fill) {
                    ctx.lineTo(canvas.width - padding, canvas.height - padding);
                    ctx.lineTo(padding, canvas.height - padding);
                    ctx.closePath();

                    const gradient = ctx.createLinearGradient(0, padding, 0, canvas.height - padding);
                    gradient.addColorStop(0, color.replace(')', ', 0.3)').replace('rgb', 'rgba'));
                    gradient.addColorStop(1, color.replace(')', ', 0)').replace('rgb', 'rgba'));

                    ctx.fillStyle = gradient;
                    ctx.fill();
                }

                // 数据点
                for (let i = 0; i < data.length; i++) {
                    const x = padding + (chartWidth / (data.length - 1)) * i;
                    const y = canvas.height - padding - (data[i] / maxValue) * chartHeight;

                    ctx.beginPath();
                    ctx.arc(x, y, 4, 0, Math.PI * 2);
                    ctx.fillStyle = color;
                    ctx.fill();
                    ctx.strokeStyle = '#ffffff';
                    ctx.lineWidth = 2;
                    ctx.stroke();
                }
            }

            // 绘制两条数据线
            drawLine(data1, '#165DFF', true);
            drawLine(data2, '#86909C', true);

            // X轴标签
            ctx.fillStyle = '#6b7280';
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';

            for (let i = 0; i < labels.length; i++) {
                const x = padding + (chartWidth / (labels.length - 1)) * i;
                ctx.fillText(labels[i], x, canvas.height - padding + 20);
            }

            // 图例
            ctx.fillStyle = '#165DFF';
            ctx.fillRect(canvas.width - 120, padding, 12, 12);
            ctx.fillStyle = '#1f2937';
            ctx.font = '12px Arial';
            ctx.textAlign = 'left';
            ctx.fillText('使用职卫帮手', canvas.width - 100, padding + 10);

            ctx.fillStyle = '#86909C';
            ctx.fillRect(canvas.width - 120, padding + 20, 12, 12);
            ctx.fillStyle = '#1f2937';
            ctx.fillText('行业平均', canvas.width - 100, padding + 30);
        }

        // 窗口大小改变时重绘图表
        window.addEventListener('resize', function() {
            const canvas = document.getElementById('chartCanvas');
            if (canvas) {
                canvas.width = canvas.parentElement.offsetWidth;
                canvas.height = canvas.parentElement.offsetHeight;

                // 重新绘制图表
                const data1 = [120, 190, 230, 290, 380, 450, 520, 610, 690, 780, 890, 1020];
                const data2 = [120, 150, 180, 210, 240, 270, 300, 330, 360, 390, 420, 450];
                const labels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

                const maxValue = Math.max(...data1, ...data2);
                const padding = 40;
                const chartWidth = canvas.width - padding * 2;
                const chartHeight = canvas.height - padding * 2;

                // 绘制坐标轴
                const ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                ctx.strokeStyle = '#e5e7eb';
                ctx.lineWidth = 1;

                // Y轴
                ctx.beginPath();
                ctx.moveTo(padding, padding);
                ctx.lineTo(padding, canvas.height - padding);
                ctx.stroke();

                // X轴
                ctx.beginPath();
                ctx.moveTo(padding, canvas.height - padding);
                ctx.lineTo(canvas.width - padding, canvas.height - padding);
                ctx.stroke();

                // 绘制网格线
                ctx.strokeStyle = '#f3f4f6';
                ctx.lineWidth = 1;

                for (let i = 0; i <= 5; i++) {
                    const y = padding + (chartHeight / 5) * i;
                    ctx.beginPath();
                    ctx.moveTo(padding, y);
                    ctx.lineTo(canvas.width - padding, y);
                    ctx.stroke();

                    // Y轴标签
                    ctx.fillStyle = '#6b7280';
                    ctx.font = '12px Arial';
                    ctx.textAlign = 'right';
                    ctx.fillText(Math.round(maxValue / 5 * (5 - i)), padding - 10, y + 4);
                }

                // 绘制数据线
                function drawLine(data, color, fill = false) {
                    ctx.beginPath();

                    for (let i = 0; i < data.length; i++) {
                        const x = padding + (chartWidth / (data.length - 1)) * i;
                        const y = canvas.height - padding - (data[i] / maxValue) * chartHeight;

                        if (i === 0) {
                            ctx.moveTo(x, y);
                        } else {
                            ctx.lineTo(x, y);
                        }
                    }

                    ctx.strokeStyle = color;
                    ctx.lineWidth = 3;
                    ctx.stroke();

                    // 填充区域
                    if (fill) {
                        ctx.lineTo(canvas.width - padding, canvas.height - padding);
                        ctx.lineTo(padding, canvas.height - padding);
                        ctx.closePath();

                        const gradient = ctx.createLinearGradient(0, padding, 0, canvas.height - padding);
                        gradient.addColorStop(0, color.replace(')', ', 0.3)').replace('rgb', 'rgba'));
                        gradient.addColorStop(1, color.replace(')', ', 0)').replace('rgb', 'rgba'));

                        ctx.fillStyle = gradient;
                        ctx.fill();
                    }

                    // 数据点
                    for (let i = 0; i < data.length; i++) {
                        const x = padding + (chartWidth / (data.length - 1)) * i;
                        const y = canvas.height - padding - (data[i] / maxValue) * chartHeight;

                        ctx.beginPath();
                        ctx.arc(x, y, 4, 0, Math.PI * 2);
                        ctx.fillStyle = color;
                        ctx.fill();
                        ctx.strokeStyle = '#ffffff';
                        ctx.lineWidth = 2;
                        ctx.stroke();
                    }
                }

                // 绘制两条数据线
                drawLine(data1, '#165DFF', true);
                drawLine(data2, '#86909C', true);

                // X轴标签
                ctx.fillStyle = '#6b7280';
                ctx.font = '12px Arial';
                ctx.textAlign = 'center';

                for (let i = 0; i < labels.length; i++) {
                    const x = padding + (chartWidth / (labels.length - 1)) * i;
                    ctx.fillText(labels[i], x, canvas.height - padding + 20);
                }

                // 图例
                ctx.fillStyle = '#165DFF';
                ctx.fillRect(canvas.width - 120, padding, 12, 12);
                ctx.fillStyle = '#1f2937';
                ctx.font = '12px Arial';
                ctx.textAlign = 'left';
                ctx.fillText('使用职卫帮手', canvas.width - 100, padding + 10);

                ctx.fillStyle = '#86909C';
                ctx.fillRect(canvas.width - 120, padding + 20, 12, 12);
                ctx.fillStyle = '#1f2937';
                ctx.fillText('行业平均', canvas.width - 100, padding + 30);
            }
        });
    });

    // 滚动显示元素
    function revealElements() {
        const reveals = document.querySelectorAll('.reveal');

        reveals.forEach(reveal => {
            const windowHeight = window.innerHeight;
            const revealTop = reveal.getBoundingClientRect().top;
            const revealPoint = 150;

            if (revealTop < windowHeight - revealPoint) {
                reveal.classList.add('active');
            }
        });
    }
</script>
</body>
</html>
